import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cloneDeep, debounce } from 'lodash';
import { useEffect, useMemo, useRef } from 'react';
import { FormNode } from '@/components';
import styles from './index.module.less';
const SearchBar = (props) => {
    const { params, callback, configs } = props;
    const paramsRef = useRef(params);
    useEffect(() => {
        paramsRef.current = { ...params };
    }, [params]);
    const valuesChange = debounce((value, field) => {
        const nParams = cloneDeep(paramsRef.current);
        nParams[field] = value;
        callback && callback(nParams);
    }, 200);
    const Search = useMemo(() => {
        return configs.map((item, idx) => {
            const keys = [
                'type',
                'options',
                'field',
                'placeholder',
                'allowClear',
                'filterOption',
                'showSearch',
                'onSearch',
                'treeData'
            ];
            const obj = {};
            keys.forEach((i) => (obj[i] = item[i]));
            return (_jsxs("div", { className: styles.searchItem, children: [_jsx("span", { className: styles.searchLabel, children: item.label }), _jsx("div", { className: styles.searchValue, children: _jsx(FormNode, { ...obj, onChange: (value) => valuesChange(value, item.field), value: params[item.field] }) })] }, idx));
        });
    }, [configs]);
    return (_jsx("div", { className: styles.searchBar, id: 'searchBar', children: Search }));
};
export default SearchBar;
